<!--文档声明为 html（最新html5）-->
<!doctype html>
<html><!--根目录-->
	<head><!--头部标签 放网页信息 浏览器、搜索引擎-->
		<!--声明当前页面编码格式为国际编码（utf-8）还有一种中文编码（gbk/gb2312）-->
		<meta charset="UTF-8">
		<!--网页三要素-->
		<meta name="Keywords" content="关键词,关键词">
		<meta name="Description" content="描述">
		<title>鼠标跟随特效</title>
		<!--css、js-->
		<!--css 衣服，化妆品修饰作用 修饰装扮页面-->
		<style>
		/*css语法：选择器{样式属性:值;...}*/
		/*浏览器默认产生 每个浏览器都不一样 兼容问题*/
		*{/*通配符 选中所有*/
			margin:0;/*外边距*/
			padding:0;/*内边距*/
		}
		.warp{/*类选择器：class命名  以‘.’+名字*/
			width:1200px;/*宽*/
			height:600px;/*高*/
			/*background:#ffff00;背景颜色*/
			margin:50px auto 0;/*上外边距50 左右居中 下外边距0*/
		}
		.warp ul li{/*后代选择器*/
			list-style:none;/*去掉默认的列表样式*/
			width:230px;
			height:360px;
			/*border:1px solid red;边框线*/
			float:left;/*左浮动 从左到右一次排列*/
			margin-right:10px;
			margin-bottom:30px;
			position:relative;/*相对定位参照物 一般是父元素 或者直系关系*/
			overflow:hidden;/*超出部分隐藏*/
		}
		.warp ul li img{
			width:230px;
			height:360px;
		}
		.warp ul li .text{
			width:230px;
			height:360px;
			background:url('images/new-bg.png');/*背景图片*/
			position:absolute;/*绝对定位*/
			top:0px;
			left:230px;
			text-align:center;/*文本对齐方式:居中*/
			line-height:360px;/*行高*/
		}
		</style>
	</head>
	<body><!--身体 网页主体部分  给用户看-->
	<!--
		行内元素：
			默认状态，不可以控制宽高度并且不可以控制上下外边距并且一行可以放多个
		块元素：
			默认状态，可以控制宽高度并且可以控制上下外边距并且独自占一行
		div:块元素，有宽度 高度可以放置内容的一个长方形区域
			页面主体部分，大的结构布局，布局框架
		命名：添加样式、JS控制元素对象
		id=""		身份证  唯一性  整个页面只有一个id名 不能出现另一				个相同的id名
		class=""	名字同名同姓重复用 多个  公交车大家都坐
		命名规范
			1、字母开头，数字，-
			2、全部小写
			3、不能单个字母
			4、通俗易懂，见名知义（提高团队意识，提高工作效率）
	-->
	<div class="warp">
		<ul><!--无序列表 块元素-->
			<li>
				<img src="images/1.jpg" width='248' height="386" alt="美女"/>
				<div class="text">春夏新品 上新无限</div>
			</li>
			<li>
				<img src="images/2.jpg" width='248' height="386" alt=""/>
				<div class="text">春夏新品 上新无限</div>
			</li>
			<li>
				<img src="images/3.jpg" width='248' height="386" alt=""/>
				<div class="text">春夏新品 上新无限</div>
			</li>
			<li>
				<img src="images/4.jpg" width='248' height="386" alt=""/>
				<div class="text">春夏新品 上新无限</div>
			</li>
			<li>
				<img src="images/5.jpg" width='248' height="386" alt=""/>
				<div class="text">春夏新品 上新无限</div>
			</li>
			<li>
				<img src="images/6.jpg" width='248' height="386" alt=""/>
				<div class="text">春夏新品 上新无限</div>
			</li>
			<li>
				<img src="images/7.jpg" width='248' height="386" alt=""/>
				<div class="text">春夏新品 上新无限</div>
			</li>
			<li>
				<img src="images/8.jpg" width='248' height="386" alt=""/>
				<div class="text">春夏新品 上新无限</div>
			</li>
			<li>
				<img src="images/9.jpg" width='248' height="386" alt=""/>
				<div class="text">春夏新品 上新无限</div>
			</li>
			<li>
				<img src="images/10.jpg" width='248' height="386" alt=""/>
				<div class="text">春夏新品 上新无限</div>
			</li>
			
		</ul>
	</div>
	<script src="js/jquery-1.12.1.min.js"></script>
	<script>
	/*
		实现原理：
			鼠标移入或者移出就是去改变text位置 left值、top值
			从那个方向移入或者移出
				确定你的鼠标移入或者移出的位置
					怎么来确定鼠标位置方向
						鼠标距离那一条边最近，是不是就从这边条方向移入或者移出
	*/
	//$就是引入的jq函数  $ = function(){}
	var Li =  $('.warp ul li');//获取到所有的li元素对象
	var _this;
	var boolen = true;
	var top="";
	var bottom="";
	var	left="";
	var	right="";
	//hover()鼠标移入或者移出对象的一个方法
	//$(this)当前元素 鼠标移入或者移出的对象
	//offset()元素在文档中的偏移值
	//abs();取绝对值 取正
	//min();找最小的一个
	//find(obj)查找元素内的什么样式
	//css()设置样式
	//animate()动画
	Li.hover(function(ev,boolen){
		move().call(this,ev,true);
//		if(a==sT){//从上进入
//			_this.find('.text').css({
//				left:0,
//				top:"-360px"
//			}).stop().animate({
//				left:0,
//				top:0
//			},200)
//		}else if(a==sB){//从下进入
//			_this.find('.text').css({
//				left:0,
//				top:"360px"
//			}).stop().animate({
//				left:0,
//				top:0
//			},200)
//		
//		}else if(a==sL){//从左进入
//			_this.find('.text').css({
//				left:'-230px',
//				top:0
//			}).stop().animate({
//				left:0,
//				top:0
//			},200)
//		
//		}else if(a==sR){//从右进入
//			_this.find('.text').css({
//				left:'230px',
//				top:0
//			}).stop().animate({
//				left:0,
//				top:0
//			},200)
//		}
	},function(ev,boolen){
		move().call(this,ev,false);
//		//获取鼠标位置
//		var x = ev.pageX;//鼠标到页面左边值
//		var y = ev.pageY;//鼠标到页面顶部值
//		//alert(x+':'+y)
//		//获取li四条边到页面的值
//		var top = _this.offset().top;
//		var bottom = _this.offset().top + _this.height();
//		var left = _this.offset().left;
//		var right = _this.offset().top + _this.width();
//		//alert(sT)
//		//计算鼠标到边的值  比较谁最近 有分负数或者正数？ 不分
//		var sT = Math.abs(y-top);
//		var sB = Math.abs(y-bottom);
//		var sL = Math.abs(x-left);
//		var sR = Math.abs(x-right);
//		//怎么去找最小也就是最近
//		var a = Math.min(sT,sB,sL,sR);
//		if(a==sT){//从上进出
//			_this.find('.text').stop().animate({
//				left:0,
//				top:'-360px'
//			},200)
//		}else if(a==sB){//从下进出
//			_this.find('.text').stop().animate({
//				left:0,
//				top:'360px'
//			},200)
//		
//		}else if(a==sL){//从左进出
//			_this.find('.text').stop().animate({
//				left:"-230px",
//				top:0
//			},200)
//		
//		}else if(a==sR){//从右进入
//			_this.find('.text').stop().animate({
//				left:"230px",
//				top:0
//			},200)
//		}
	});
	function move(ev){
		_this = $(this);
		//获取鼠标位置
		var ev = ev||window.event;
		var x = ev.pageX;//鼠标到页面左边值
		var y = ev.pageY;//鼠标到页面顶部值
		//alert(x+':'+y)
		//获取li四条边到页面的值
		 top = _this.offset().top;
		 bottom = top + _this.height();
		 left = _this.offset().left;
		 right = left + _this.width();
		//alert(sT)
		//计算鼠标到边的值  比较谁最近 有分负数或者正数？ 不分
		var sT = Math.abs(y-top);
		var sB = Math.abs(y-bottom);
		var sL = Math.abs(x-left);
		var sR = Math.abs(x-right);
		//怎么去找最小也就是最近
		var n = Math.min(sT,sB,sL,sR);
		switch (n){
			case sT:
				if (boolen) {
				_this.find('.text').css({
					left:0,
					top:-_this.height()+'px'
				}).stop().animate({
					top:0
				},300);
			} else{
				_this.find('.text').stop().animate({
					top:-_this.height()+'px'
				},300);
			}
				break;
			case sB:
			if (boolen) {
				_this.find('.text').css({
					left:0,
					top:_this.height()+'px'
				}).stop().animate({
					top:0
				},300);
			} else{
				_this.find('.text').stop().animate({
					top:_this.height()+'px'
				},300);
			}
			
			case sL:
			if (boolen) {
				_this.find('.text').css({
					top:0,
					left:-_this.width()+'px'
				}).stop().animate({
					left:0
				},300);
			} else{
				_this.find('.text').stop().animate({
					left:-_this.width()+'px'
				},300);
			}
				break;
			case sR:
			if (boolen) {
				_this.find('.text').css({
					top:0,
					left:_this.width()+'px'
				}).stop().animate({
					left:0
				},300);
			} else{
				_this.find('.text').stop().animate({
					left:_this.width()+'px'
				},300);
			}
				break;
			default:
				break;
		}
	}
	</script>
	</body>
</html>
